<!-- @Author: Yu_Bo -->
<template>
	<view class="sell" :style="[pageStyle]">
		<!-- nav -->
		<c-navbar navtype='sell'></c-navbar>
		<!-- background -->
		<view class="page_background"></view>
		<!-- main -->
		<view class="sell_main" v-if="sellinginfo">
			<view class="main_content">
				<!-- 卖书须知 -->
				<view class="main_tip">
					<view class="tip_title">
						卖书须知
					</view>
					<view class="tip_txt">
						<u-parse :html="sellinginfo.notice"></u-parse>
					</view>
				</view>
				<!-- 卖书流程 -->
				<view class="main_tip">
					<view class="tip_title">
						卖书流程
					</view>
					<view class="tip_flow">
						<image :src="sellinginfo.flow" mode="widthFix"></image>
						<!-- <view class="flow_list" v-for="(item, index) in flowData" :key="index">
							<image class="icon" :src="item.icon" mode=""></image>
							<image class="txt" :src="item.txt" mode=""></image>
						</view> -->
					</view>
				</view>
				<!-- 卖书地点 -->
				<view class="main_tip">
					<view class="tip_title">
						卖书地点
					</view>
					<view class="tip_txt">
						<text>{{sellinginfo.address}}</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="main_btn">
				<view class="btn_left" @click="submitBtn">
					直接下单
				</view>
				<view class="btn_right color_right page_button" @click="scanBtn">
					扫码查价下单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		data() {
			return {
				flowData: [
					{
						icon: require('@/static/images/img/scan_icon.png'),
						txt:  require('@/static/images/img/flow_txt1.png'),
					},
					{
						icon: require('@/static/images/img/flow_icon2.png'),
						txt:  require('@/static/images/img/flow_txt2.png'),
					},
					{
						icon: require('@/static/images/img/flow_icon3.png'),
						txt:  require('@/static/images/img/flow_txt3.png'),
					}
				]
			}
		},
		computed: {
			...mapState({
				sellinginfo: (state) => state.sellinginfo
			}),
			pageStyle() {
				return {
					'--pagebackground': "url(" + require('@/static/images/img/home_nav_bg.png') + ")"
				}
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			// 直接下单
			submitBtn() {
				this.$navToLogin("/pagesSell/placeorder/index?type=1")
			},
			// 扫码下单
			scanBtn() {
				var that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log(res)
						console.log('条码类型：' + res.scanType)
						console.log('条码内容：' + res.result)
						if(res.result) {
							that.getInfo(res.result)
						} else {
							that.$tips.showToast("未识别到条码内容")
						}
					}
				});
			},
			getInfo(val) {
				var that = this
				var params = {
					isbn: val,
				}
				that.$httpApi.checkPrice(params).then((res) => {
					if (res.code == 1) {
						let createData = JSON.stringify(res.data)
						let newStr = createData.replace(/%/g, '%25')
						this.$navToLogin("/pagesSell/scaninfo/index?info="+encodeURIComponent(newStr))
					}
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	.sell {
		width: 100%;
		
		.sell_main {
			position: relative;
			z-index: 2;
			width: 100%;
			
			.main_content {
				width: 100%;
				padding: 30rpx 30rpx 150rpx 30rpx;
				
				.main_tip {
					width: 100%;
					margin-bottom: 30rpx;
					padding: 25rpx 30rpx;
					border: 1px dashed #5A68FF;
					border-radius: 20rpx;
					
					.tip_title {
						width: 100%;
						padding-bottom: 15rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
					}
					
					.tip_txt {
						width: 100%;
						line-height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					
					.tip_flow {
						width: 100%;
						padding-top: 5rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.flow_list {
							width: 176rpx;
							
							.icon {
								display: block;
								width: 176rpx;
								height: 176rpx;
							}
							
							.txt {
								display: block;
								width: 104rpx;
								height: 66rpx;
								margin: 10rpx auto 0;
							}
						}
					}
				}
			}
			
			.main_btn {
				position: fixed;
				bottom: 30rpx;
				left: 0;
				width: 100%;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.btn_left {
					width: 330rpx;
					height: 86rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #5A68FF;
					background: #E9EBFF;
					border: 2rpx solid #5A68FF;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.btn_right {
					width: 330rpx;
					height: 90rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>